<template>
  <div>

    <h1>在线聊天</h1>
    <div style="display: flex; min-height: 500px; background: #fff; padding: 30px;">
      <div style="background: #efefef; border-radius: 10px; overflow:hidden;">
        <div style="background: #8db1d2; color: #fff; padding: 10px;">
          <img alt="Vue logo" style="width: 20px; height: 20px; border-radius: 10px; margin-right: 5px;" :src="myInfo.avatar">
          {{myInfo.realname}}
        </div>
        <template v-for="(user, i) in userList" >
          <div v-if="user"  :key="i+user.socketId" @click="currentUserId = user.socketId" style="cursor: pointer;" :class="currentUserId == user.socketId ? 'checkBg' : ''">
            <div style=" border-bottom: 1px solid #fff; display: flex; align-items: center; padding:10px 20px 10px 15px;">
              <img alt="Vue logo" style="width: 32px; height: 32px; border-radius: 16px; margin-right: 5px;" :src="user.avatar">
              {{user.realname}}
            </div>
          </div>
        </template>
      </div>
      <div style="flex:1; display: flex; flex-direction: column; margin-left: 15px;">
        <div style="flex:1; display: flex; flex-direction: column; max-height: 385px; overflow-y: auto;" ref="msgBox">
          <template v-for="(msg, i) in msgList">
            <div v-if="msg.from"  :key="i" :style="myInfo.socketId == msg.from ? 'align-self: end; padding: 10px;' : 'padding: 10px;'">
              <span v-if="myInfo.socketId == msg.from">{{msg.content}}</span>
              <img style="width: 32px; height: 32px; border-radius: 16px; margin-right: 5px; margin: 0 10px;" :src="getAvatar(msg, myInfo.socketId == msg.from)">
              <span v-if="myInfo.socketId != msg.from">{{msg.content}}</span>
            </div>
            <div v-else :key="i" style="background: #eee; padding: 5px 10px; color: #bbb; border-radius: 5px; ">{{myInfo.realname + msg}} 在线人数：{{userList.length}}</div>
          </template>
        </div>
        <div style="display:flex; background: #eee; padding: 10px; border-radius: 10px;">
          <input v-model="content" style="flex:1; border:1px solid #3aa1ff; padding: 5px 10px;  height: 35px; border-radius: 10px; margin-right:5px;" />
          <a-button @click="send" type="primary">发送</a-button>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import { mapActions, mapGetters, mapState } from 'vuex'
   import { sendInfo } from '@/api/api'
  export default {
    name: "socketComp",
    components: {
    },
    data () {
      return {
        content: '',
        title: 'socketComp提交!',
        msgList: [],
        currentUserId: '',
        myInfo: {},
        userList: []
      }
    },
    watch: {
    },
    methods: {
      ...mapGetters(["userInfo"]),
      send() {
          let params = {to: this.currentUserId, from: this.myInfo.socketId, content: this.content};
          sendInfo(params).then(res=>{
            this.msgList.push(params)
            this.$nextTick(()=>{
              this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight
            })
          })
      },
      getAvatar(row, self) {
        if (self) {
          return this.myInfo.avatar
        } else {
          let url = ''
          this.userList.some(item => {
            if (row.from == item.socketId) {
              url = item.avatar
              return true
            }
          })
          return url
        }
      }
    },
    mounted() {
      // 服务端发送到前端的信息
      this.sockets.subscribe('sendToFront', msgObj => {
        this.msgList.push(msgObj)
        this.$nextTick(()=>{
          this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight
        })
      })

      // 向服务端追加当前的用户信息
      this.$socket.emit('appendUser', this.userInfo())

      // 接受来自服务的数据 获取当前连接的用户列表
      this.sockets.subscribe('connectionUserList', results => {
        let list = [];
        results.map(r => {
          if (r) {
            if (r.realname == this.userInfo().realname){
              this.myInfo = r
            } else {
              if (!this.currentUserId) {
                this.currentUserId = r.socketId
              }
              list.push(r)
            }
          }
        })
        this.userList = list
      })
      
    }
  }
</script>

<style scoped>
.checkBg{
  background: #bcad94;
  color: #fff;
}
</style>